<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="../../d3.js"></script>
<script>
//svg尺寸
var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
//条宽
var barWidth=8;

//数据集
var dataset=[1,4,9,16,25,36,49,64,81,100];
//默认域的平方根比例尺
//var powScale = d3.scale.pow().exponent(.5);
var powScale = d3.scale.sqrt();

var xScale = d3.scale.ordinal()
	.domain(dataset)
    .rangePoints([0, width]);
//创建svg标签
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + 0 + "," + margin.top + ")");
//创建矩形条
var rects=svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr({
		x:function(d,i){ return i*(width/(dataset.length-1))+margin.left-barWidth/2; },
		y:function(d,i){ return height-powScale(d); },	//矩形起始纵坐标
		width:function(d){ return barWidth; },
		height:function(d){ return powScale(d); },	//矩形的条高
		fill:function(d){ return "steelblue"; },
		stroke:'black',
		'stroke-width':.5
	});
//创建矩形条的文本
var texts=svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text( function(d){ return powScale(d); })
	.attr({
		x:function(d,i){ return i*(width/(dataset.length-1))+margin.left-barWidth/2; },
		y:function(d,i){ return height-powScale(d); }
	});
//创建坐标轴
svg.append("g")
 .attr("transform", "translate(" + margin.left + "," + height + ")")
    .attr("class", "x axis")
    .call(d3.svg.axis().scale(xScale).orient("bottom"));

</script>